<template>
  <div>
    <div id="list">
      <div v-for="(item, index) in products" :item="item" :key="index" id="contact">
      <router-link
        :to="{
          name:'CommodityDetail',
            params:{//使用 params 传递参数时,query 不能使用，需要使用 params
              id:item.id,
              img:item.img,
              name:item.name,
              price:item.price,
              tmPrice:item.tmPrice,
              discount:item.discount,
              originalPrice:item.originalPrice,
            }
        }">
          <img :src="item.img" :title="item.name" />
          <h2>
            <span class="price">
              {{item.price}} &nbsp;
              <span class="beforediscount">{{item.brforediscount}}</span>
              <span class="discount">{{item.discount}}</span>
            </span>
            <br />
            {{ item.name }}
          </h2>
                </router-link>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CommodityList",
  data() {
    return {
      products: [
        {
          id: "1",
          name: "太平鸟 | 【蜡笔小新】男装夏季男士宽松情侣短袖男式T恤",
          img:
            "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/111495/2021/0625/85/15e5fe0a-2840-4b28-b77d-0292a567ae6e_420_531_380x480_90.jpg",
          price: "￥104",  //现价
          discount: "2.6折",
          originalPrice:"￥268", //原价
          tmPrice: "￥99", //特卖价
        },
        {
          id: "2",
          name: "太平鸟 | 三维熊t恤女夏装中长款宽松大码体恤上衣短袖",
          img:
            "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00115128/10001155/903534495-1093044331794329600-1093044331794329602-50_420_531_512x648_90.jpg",
          price: "￥211",
          discount: "4.5折",
          originalPrice:"￥268",
          tmPrice: "￥163",
        },
        {
          id: "3",
          name: "太平鸟 | 碎花复古翻领V领连衣裙女夏季收腰长裙甜美茶",
          img:
            "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00115128/10001155/1781631002-1089385152500224013-1089385152500224018-50_420_531_512x648_90.jpg",
          price: "￥255",
          discount: "3.4折",
          originalPrice:"￥599",
          tmPrice:"￥199",
        },
        {
          id: "4",
          name:
            "太平鸟 | 男装2022夏季新品男士T恤时尚情侣刺绣休闲短袖体恤男式T恤",
          img:
            "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/111495/2022/0117/78/a1416563-af91-40fc-8834-b59a9aaee14b_420_531_512x648_90.jpg",
          price: "￥89",
          discount: "4.3折",
          originalPrice:"￥198",
          tmPrice:"￥78",
        }
      ]
    };
  },
  methods: {}
};
</script>

<style scoped>
#list a {
  text-decoration: none;
}
#list img {
  width: 450px;
  margin: 20px 25px;
}
#list h2 {
  width: 460px;
  color: #333;
  margin-left: 30px;
  font-weight: 500;
  font-size: 25px;
}
#contact {
  float: left;
}
.price {
  color: #333;
  font-size: 40px;
}
.beforediscount {
  color: gray;
  font-size: 30px;
  text-decoration: line-through;
}
.discount {
  color: gray;
  font-size: 30px;
}
</style>